import React, { Component } from 'react';
import { Grid, Slider, Icon, Button } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import { Chart, Axis, Geom, Tooltip } from 'bizcharts';
import './DataStatistics.scss';
import { Link } from 'react-router-dom'
import IceEllipsis from '@icedesign/ellipsis';
import IceLabel from '@icedesign/label';
import axios from 'axios'
const getData = () => {
  return Array.from({ length: 3 }).map((item, index) => {
    return {
      index: `0${index + 1}`,
      title: '云存储特惠',
      desc: '上云仅 <b>33元/年</b> ，降低企业成低企业成低企业成本，降低企业成低企业成低企业成本，降低企业成低企业成低企业成本，降低企业成低企业成低企业成本，降低企业成低企业成低企业成本',
      link: '#',
    };
  });
};
const { Row, Col } = Grid;

const slides = [
  {
    url: require('./images/selfie-3611467_960_720.jpg'),
    text: "阿里公益T恤设计大概"
  },
  {
    url: "https://raw.githubusercontent.com/alibaba/ice/master/react-materials/blocks/IntroBanner/src/images/TB1R9Ius1uSBuNjy1XcXXcYjFXa-3840-900.jpg",
    text: "手机淘宝皮肤征集"
  },

];
const CustomNextArrow = props => {
  return (
    <div {...props} style={arrowStyle}>
      <Icon type="arrow-double-right" />
    </div>
  );
};
const CustomPrevArrow = props => {
  return (
    <div {...props} style={arrowStyle}>
      <Icon type="arrow-double-left" />
    </div>
  );
};

const arrowStyle = {
  display: "block",
  opacity: 0.5,
  margin: "0 20px"
};
const dataSource = {
  chartData: [
    { month: '1 月', users: 38 },
    { month: '2 月', users: 52 },
    { month: '3 月', users: 61 },
    { month: '4 月', users: 115 },
    { month: '5 月', users: 48 },
    { month: '6 月', users: 38 },
    { month: '7 月', users: 48 },
    { month: '8 月', users: 58 },
    { month: '9 月', users: 68 },
    { month: '10 月', users: 88 },
    { month: '11 月', users: 98 },
    { month: '12 月', users: 68 },
  ],


  statisticData: [
    {
      name: '今日注册',
      value: '12678',
      img: {
        width: 35,
        height: 32,
        url: require('./images/TB1fTidceuSBuNjy1XcXXcYjFXa-70-64.png'),
      },
    },
    {
      name: '今日登录',
      value: '22139',
      img: {
        width: 30,
        height: 31,
        url: require('./images/TB1fnidceuSBuNjy1XcXXcYjFXa-60-62.png'),
      },
    },
    {
      name: '今日订阅',
      value: '35623',
      img: {
        width: 28,
        height: 27,
        url: require('./images/TB1gDidceuSBuNjy1XcXXcYjFXa-56-54.png'),
      },
    },
    {
      name: '今日评论',
      value: '16826',
      img: {
        width: 28,
        height: 26,
        url: require('./images/TB1hDidceuSBuNjy1XcXXcYjFXa-56-52.png'),
      },
    },
    {
      name: '七日新增',
      value: '25%',
      img: {
        width: 35,
        height: 32,
        url: require('./images/TB11FFTcgmTBuNjy1XbXXaMrVXa-70-64.png'),
      },
    },
    {
      name: '七日活跃',
      value: '68%',
      img: {
        width: 28,
        height: 28,
        url: require('./images/TB1h_1jcamWBuNjy1XaXXXCbXXa-56-56.png'),
      },
    },
  ],
}

export default class DataStatistics extends Component {
  static displayName = 'DataStatistics';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      dataSource: []
    };
  }
  componentWillMount() {
    this.getData()
  }
  getData() {
    axios.get('http://zzuisa.cn/reader/blog/hot')
      .then((res) => {
        console.log('res', res)
        if (res.data.code === 0)
          this.setState({
            dataSource: res.data.data
          })
      })
  }
  render() {
    const cols = {
      users: { tickInterval: 20 },
    };

    const { dataSource } = this.state
    return (
      <div className="data-statistics">
        <IceContainer>
          <h4 style={styles.title}>本周热点</h4>
          <Row wrap justify="space-between">
            <Col xxs="24" l="16" xl="13">
              <Slider

                nextarrow={<CustomNextArrow />}
                prevarrow={<CustomPrevArrow />}
                lazyLoad
              >
                {slides.map((item, index) => (

                  <div className="intro-banner-wrap" style={styles.introBannerWrapStyles}>
                    <img
                      className="intro-banner-img"
                      src={item.url}
                      style={styles.introBannerImgStyles}
                      alt=""
                    />
                    <div
                      className="intro-banner-img-mask"
                      style={styles.introBannerImgMaskStyles}
                    />
                    <div className="intro-banner-text" style={styles.introBannerTextStyles}>
                      <h2
                        className="intro-banner-title"
                        style={styles.introBannerTitleStyles}
                      >
                        智慧社区，未来生活
  </h2>
                      <p
                        className="intro-banner-subtitle"
                        style={styles.introBannerSubtitleStyles}
                      >
                        输出支付，账户体系，信用金融，电商，采购，文化公益和大数据等能力和资源，助力社区物业通过提升信息化、智能化水平，改善物业管理水平和服务品质，推动建设便利舒适、安全和谐的智慧社区
  </p>
                    </div>
                  </div>
                  // <div key={index} className="slider-img-wrapper">

                  //   <img
                  //     className="intro-banner-img"
                  //     src={item.url}
                  //     style={styles.introBannerImgStyles}
                  //     alt=""
                  //   />
                  //   {/* <img style={{ width: '100%', maxWidth: '100%' }} src={item.url} alt={item.text} /> */}
                  // </div>
                ))}
              </Slider>
              {/* <Chart
                height={300}
                padding={[40, 10, 40, 35]}
                data={dataSource.chartData}
                scale={cols}
                forceFit
              >
                <Axis name="month" />
                <Axis name="value" />
                <Tooltip crosshairs={{ type: 'y' }} />
                <Geom type="interval" position="month*users" />
              </Chart> */}
            </Col>
            <Col xxs="24" l="8" xl="11">

              <div style={styles.container2}>
                <div style={styles.content}>
                  {/* <Row className="demo-row" justify="space-around">
                    <Col style={{ padding: '10px' }} span={16}><span style={{ fontSize: '24px' }}><b>热门文章</b></span></Col>
                    <Col style={{ paddingTop: '10px' }} span={6}> <Button type='primary' >写文章</Button></Col>
                  </Row> */}

                  <Row className="demo-row" justify="space-around">
                    <Col style={{ padding: '10px' }} span={16}><div style={styles.mainTitle}>热门文章</div></Col>
                    <Col style={{ paddingTop: '10px' }} span={6}><div style={styles.mainDesc}><Link to="/article/create"><Button type='primary'>写文章</Button></Link></div></Col>
                  </Row>
                  <div style={styles.items2}>
                    <div style={styles.tabWrap}>
                      {dataSource.map((item, index) => {
                        return (
                          <div style={styles.tabList} key={item.index}>
                            <div style={styles.left}>
                              <Link to={`/blog/read/${item.id}`}>
                                <Row justify="start">
                                  <Col><div style={styles.num}>{index + 1}</div></Col>
                                  <Col align="left"><span style={styles.titles}>{item.bname}</span></Col>
                                  <IceEllipsis showTooltip={true} lineLimit={3} text={<div dangerouslySetInnerHTML={{ __html: `${item.btitle}` }} />} />
                                  <Col align="center"><span style={styles.desc} /></Col>
                                </Row>
                              </Link>
                              <span style={styles.btnBox}>
                                {/* <a href={item.link} style={styles.btnLink}>
                                  查看详情
                        </a> */}
                              </span>

                            </div>
                          </div>
                        );
                      })}
                    </div>
                    {/* <div style={styles.titles}>{item.title}
                                <div
                                  style={styles.desc}
                                  dangerouslySetInnerHTML={{ __html: item.desc }}

                                />
                                <a href={item.link} style={styles.btnLink}>
                                  查看详情
                        </a>
                              </div> */}
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  container: {
    width: '100%',
  },
  title: {
    margin: 0,
    fontSize: '16px',
    paddingBottom: '15px',
    fontWeight: 'bold',
    color: '#333',
    borderBottom: '1px solid #eee',
  },
  items: {
    display: 'flex',
    flexDeriction: 'row',
    flexWrap: 'wrap',
    marginLeft: '30px',
    fontSize: '15px'
  },
  itemIcon: {
    marginRight: '10px',
  },
  icon: {
    color: '#3FA1FF',
  },
  value: {
    color: '#1F82FF',
    fontSize: '20px',
  },
  name: {
    fontSize: '12px',
  },
  introBannerWrapStyles: {
    width: '100%',
    height: '450px',
    position: 'relative',
    overflow: 'hidden',
  },
  introBannerImgStyles: {
    position: 'absolute',
    top: '0',
    left: '50%',
    display: 'block',
    width: '100%',
    height: '100%',
    transform: 'translateX(-50%)',
    zIndex: '10',
  },
  introBannerImgMaskStyles: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: '0',
    left: '0',
    background: '#000',
    opacity: '.45',
    zIndex: '15',
  },
  introBannerTextStyles: {
    position: 'absolute',
    top: '112px',
    zIndex: '15',
    width: '100%',
    boxSizing: 'border-box',
    paddingLeft: '40px',
    color: '#fff',
    pointerEvents: 'none',
  },
  introBannerTitleStyles: {
    fontWeight: '400',
    fontSize: '50px',
    lineHeight: '70px',
  },
  introBannerSubtitleStyles: {
    marginTop: '8px',
    marginBottom: '48px',
    maxWidth: '768px',
    fontSize: '16px',
    lineHeight: '25px',
  },
  container2: {
    width: '100%',
    padding: '30px 0',
    background: '#000',
    maxHeight: '450px',
    marginRight: '20px'
  },
  content: {
    width: '100%',
    height: '400px'
  },
  mainTitle: {
    fontSize: '30px',
    color: '#fff',
    letterSpacing: '0.77px',
    lineHeight: '32px',
    margin: '0',
    fontWeight: '700',
  },
  mainDesc: {
    fontSize: '24px',
    lineHeight: '30px',
    color: '#fff',
    marginTop: '8px',
    fontWeight: '700',
  },
  img: {
    marginTop: '70px',
    maxWidth: '100%',
  },
  tab: {
    right: '10px',
    top: '66px',
    overflow: 'hidden',
  },
  first: {
    marginTop: '0',
  },
  active: {
    color: '#fff',
    borderBottom: '1px solid #fff',
  },
  tabName: {
    float: 'left',
    cursor: 'pointer',
    fontSize: '26px',
    lineHeight: '30px',
    color: 'hsla(0,0%,100%,.5)',
    marginLeft: '30px',
    padding: '14px 0',
    borderBottom: '1px solid transparent',
    transition: 'all .3s',
  },
  items2: {
    overflow: 'hidden',
    paddingTop: '50px',
    margin: '10px'
  },
  tabList: {
    width: '100%',
    height: '50px',
    background: '#191a1e',
    paddingRight: '40px',
    marginTop: '15px',
    transition: 'all .3s',
  },
  middle: {
    paddingLeft: '335px',
    paddingRight: '180px',
    height: '50px',
    overflow: 'hidden',
  },
  left: {
    left: '0',
    top: '0',
    height: '50px',
    // overflow: 'hidden',
    textAlign: 'left',
  },
  num: {
    float: 'left',
    fontSize: '24px',
    width: '50px',
    height: '50px',
    lineHeight: '65px',
    fontWeight: '700',
    color: '#fff',
    textAlign: 'center',
    background: '#236cff',
  },
  titles: {
    float: 'left',
    fontSize: '20px',
    margin: '0 auto',
    lineHeight: '40px',
    color: '#fff',
    paddingLeft: '8px',
    paddingRight: '8px',
    whiteSpace: 'nowrap',
    // overflow: 'hidden',
  },
  desc: {
    fontSize: '14px',
    color: 'hsla(0,0%,100%,.8)',
    // whiteSpace: 'nowrap',
    // overflow: 'hidden',
    width: '100px',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
  },
  btnBox: {
    float: 'right',
  },
  btnLink: {
    width: '90px',
    height: '40px',
    border: '1px solid #fff',
    lineHeight: '38px',
    fontSize: '16px',
    color: '#fff',
    textDecoration: 'none',
    textAlign: 'center',
    transition: 'all .3s',
  },

};
